<template>
  <div class="notice">
    <div class="header">
      {{ notice.title }}
    </div>
    <div class="foot">
      <div class="time">
        <i class="iconfont icon-shijian"></i>
        {{ notice.createTime }}
      </div>
      <div class="number">
        <i class="iconfont icon-zuozhe"></i>
        {{ notice.creator }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, defineProps } from "vue";
const props = defineProps({
  notice: {
    type: Object,
    default: {},
  },
});

const { notice } = toRefs(props);
onMounted(() => {});
</script>

<style lang="less" scoped>
.notice {
  width: 98%;
  padding: 15px 5px;
  margin-top: 13px;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1), 0 2px 8px rgba(0, 10, 32, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 2px solid rgba(0, 10, 32, 0.05);
  cursor: pointer;
  .header:hover {
    color: #18a058;
    cursor: pointer;
  }

  .header {
    margin-bottom: 10px;
    font-size: 1.2em;
  }
  .foot {
    display: flex;
    font-weight: 500;
    .number {
      margin-left: 10px;
    }
  }
}
</style>
